<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>签到 </text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="">
				<view class="title-01">
					手势签到
				</view>
				<view class="title-02">
					请重绘发起者传达的手势图案完成签到
				</view>
				<view class="gesture-container">
					<canvas canvas-id="gestureCanvas" class="gesture-canvas" disable-scroll="true"
						@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" />
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout talk_flex_1">

			</view>
			<!---flex布局flex布局结束-->
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				ctx: null,
				r: 30,
				arr: [],
				chooseArr: [],
				isDrawing: false,
				resultType: null, // null: 未操作, 'success': 成功, 'fail': 失败
				teaching_id: "",
				msgid:'',//系统ing消息过来的签到
			}
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.msgid=options.msgid?options.msgid:''
			this.teaching_id = options.teaching_id
			console.log(this.teaching_id);
		},
		onUnload() {

		},
		onReady() {
			this.initCanvas()
		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			initCanvas() {
				this.ctx = uni.createCanvasContext("gestureCanvas", this)

				const canvasSize = uni.upx2px(580)
				const radius = uni.upx2px(32)
				const shadowRadius = uni.upx2px(28)

				const gap = (canvasSize - 2 * (radius + shadowRadius)) / 2

				this.arr = []
				let index = 0
				for (let i = 0; i < 3; i++) {
					for (let j = 0; j < 3; j++) {
						this.arr.push({
							x: radius + shadowRadius + j * gap,
							y: radius + shadowRadius + i * gap,
							index: index++
						})
					}
				}

				this.drawPoints()
			},
			// 公告 已读
			async getred(){
				let datalist = await this.$api.get(global.apiUrls.post68413be3159e9, {
					aid: this.msgid,
				});
							
				// if (datalist.data.code != 1) {
				// 	this.$message.info(datalist.data.msg);
				// 	return
				// }
			},

			drawPoints() {
				const canvasSize = uni.upx2px(580)
				this.ctx.clearRect(0, 0, canvasSize, canvasSize)

				const radius = uni.upx2px(32)
				const shadowRadius = uni.upx2px(28)

				this.arr.forEach((p) => {
					// 根据状态设置颜色
					let fillColor = "#E9EAEF"
					let shadowColor = "#ffffff"
					if (this.chooseArr.includes(p.index)) {
						if (this.resultType === "success") {
							fillColor = "#0EC655"
							shadowColor = "rgba(14,198,85,0.08)"
						} else if (this.resultType === "fail") {
							fillColor = "#ED5E5B"
							shadowColor = "rgba(237,94,91,0.08)"
						} else {
							fillColor = "#145EFD"
							shadowColor = "rgba(20,94,253,0.08)"
						}
					}

					// 外圈
					this.ctx.beginPath()
					this.ctx.arc(p.x, p.y, radius + shadowRadius, 0, Math.PI * 2)
					this.ctx.setFillStyle(shadowColor)
					this.ctx.fill()
					this.ctx.closePath()

					// 内圆
					this.ctx.beginPath()
					this.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2)
					this.ctx.setFillStyle(fillColor)
					this.ctx.fill()
					this.ctx.closePath()
				})

				// 连线
				if (this.chooseArr.length > 0) {
					this.ctx.beginPath()
					let lineColor = "#145EFD"
					if (this.resultType === "success") lineColor = "#0EC655"
					else if (this.resultType === "fail") lineColor = "#ED5E5B"

					this.ctx.setStrokeStyle(lineColor)
					this.ctx.setLineWidth(3)
					this.chooseArr.forEach((i, idx) => {
						const p = this.arr[i]
						if (idx === 0) this.ctx.moveTo(p.x, p.y)
						else this.ctx.lineTo(p.x, p.y)
					})
					this.ctx.stroke()
					this.ctx.closePath()
				}

				this.ctx.draw(true)
			},

			touchStart(e) {
				this.chooseArr = []
				this.isDrawing = true
				this.resultType = null
				this.checkChoose(e)
			},

			touchMove(e) {
				if (!this.isDrawing) return
				this.checkChoose(e)
				this.redraw(e)
			},

			async touchEnd() {
				this.isDrawing = false
				const result = this.chooseArr.map(x => x + 1).join(",");

				// 签到完成之后记录一下
				let datastate = await this.$api.post(global.apiUrls.post68aecbf3b2237, {
					teaching_id: this.teaching_id,
					check_password: result
				});
				if(this.msgid){
					this.getred()
				}
				// 成功1 
				if (datastate.data.code == 1) {
					this.resultType = "success"
					uni.showToast({
						title: "签到成功",
						icon: "none"
					})
					
					this.drawPoints()
					this.$urouter.redirectTo(
						`/pages/course/resultSign/resultSign?code=${datastate.data.code}&time=${datastate.data.time}`
					)
				}
				// 超时2
				else if (datastate.data.code == 2) {
					this.resultType = "fail"
					uni.showToast({
						title: "已超时",
						icon: "none"
					})

					this.drawPoints()
					this.$urouter.redirectTo(
						`/pages/course/resultSign/resultSign?code=${datastate.data.code}&time=${datastate.data.time}`
					)
				}
				// 失败
				else if (datastate.data.code == -1) {
					this.resultType = "fail"
					uni.showToast({
						title: "手势错误，请重试",
						icon: "none"
					})

					this.drawPoints()
					// 延迟0.5秒清空，让用户可以重新操作
					setTimeout(() => {
						this.chooseArr = []
						this.resultType = null
						this.drawPoints()
					}, 1000)
				}
			},

			checkChoose(e) {
				const {
					x,
					y
				} = e.touches[0]
				this.arr.forEach((p) => {
					if (Math.abs(x - p.x) < this.r && Math.abs(y - p.y) < this.r && !this.chooseArr.includes(p
							.index)) {
						this.chooseArr.push(p.index)
					}
				})
			},

			redraw(e) {
				this.drawPoints()

				this.ctx.beginPath()
				let lineColor = "#145EFD"
				if (this.resultType === "success") lineColor = "#0EC655"
				else if (this.resultType === "fail") lineColor = "#ED5E5B"

				this.ctx.setStrokeStyle(lineColor)
				this.ctx.setLineWidth(3)
				this.chooseArr.forEach((i, idx) => {
					const p = this.arr[i]
					if (idx === 0) this.ctx.moveTo(p.x, p.y)
					else this.ctx.lineTo(p.x, p.y)
				})
				if (e) {
					const {
						x,
						y
					} = e.touches[0]
					this.ctx.lineTo(x, y)
				}
				this.ctx.stroke()
				this.ctx.closePath()
				this.ctx.draw(true)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.gesture-container {
		display: flex;
		justify-content: center;
		align-items: center;
		// height: 100vh;
	}

	.gesture-canvas {
		width: 580rpx;
		height: 580rpx;
	}

	.title-01 {
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		margin-top: 106rpx;
		text-align: center
	}

	.title-02 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-top: 20rpx;
		margin-bottom: 129rpx;
		text-align: center
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #FFF;
		background-size: 100% auto;
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.talk_flex_1 {
		padding: 24rpx;
	}
</style>